<template>
	<view class="mask mask-show">
		<view class="cu-dialog" :style="'margin:'+screenWidth/8+'px;'+'width:'+screenWidth+'px'">
			<view class="icon-item position-absolute right-2">
				<uni-icons type="close" size="25" @click="closeModalDialog" />
			</view>
			<image :src="targetUser.avatar" class="smaller-circle"></image>
			<view class="flex flex-column flex-1 align-center">
				<view class="flex align-center">
					<text class="font-md text-black">{{targetUser.user_nicename}}</text>
				</view>
				<text class="font-sm text-danger mt-1">{{targetUser.area_address}}·{{targetUser.area_address1}}</text>
				<view class="flex flex-wrap">
					<view class="border rounded32 text-lightbule font-sm mx-1 my-1 px-2" v-for="(item2,index2) in setlist" :key="index2">{{item2.name}}</view>
				</view>
				<view class="flex align-center my-1">
					<text class="font text-warning font-weight-bold mr-2 mt-1">4.95</text>
					<!-- 禁用状态 -->
					<!-- <uni-rate :size="16" :disabled="true" disabledColor="#ffc107" :value="4.5" /> -->
					<sunui-star :defaultStar="4.5" :disabledStar="true" class="sunui-star" />
				</view>
				<view class="flex align-center justify-center font-weight-bold w-100 my-2">
					<view class="mx-4" @click="changeTab(index)" v-for="(item,index) in tabBars" :key="index" :class="tabIndex === index ? 'text-main text-underline font-md' : 'text-light-muted'">
						{{item.name}}
					</view>
				</view>
				<text class="font font-weight-bold text-main mt-1">￥3/分钟</text>
				<button type="primary" class="callpair-button" @click="sendCallPushing()">语音通话</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//是否显示
			value: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			targetUser: Object,
			screenWidth: {
				type: Number,
				default: 1080
			},
		},
		data() {
			return {
				modalName: 'normal',
				radio: 'radio1',
				tabIndex: 0,
				setlist: [{
					name: "情感纠纷"
				}, {
					name: "经济合同"
				}, {
					name: "情感纠纷"
				}],
				tabBars: [{
					name: "语音通话"
				}, {
					name: "视频通话"
				}],
				currentid:'1',
				trtcuuid: 'trtcuuid',
				modalShow:false
			};
		},
		created() {
			uni.getStorage({
				key: "user-info",
				success: (res) => {
					if (res.data) {
						let result = JSON.parse(res.data);
						this.currentid = result['id'];
						this.trtcuuid = result['trtcuuid'];
					}
				}
			});
		},
		computed: {
			
		},
		methods: {
			closeModalDialog() {
				this.checkAuth(()=>{
					// 通知父组件
					this.$emit('closeModal');
				})
			},
			// 切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			ChooseCheckbox(e) {
				let items = this.checkbox;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
						break
					}
				}
			},
			sendCallPushing() {
				let data = {
					userid: this.currentid,
					targetid: this.targetUser['id'],
				};
				console.log(data)
				this.$H.post('/user/public/sendcallpushing', data).then(res => {
					console.log(res)
					if (res.code == 101) {
						let roomId = 10000 + parseInt(this.currentid);
						console.log(roomId + ',trtcuuid:' + this.trtcuuid);
						uni.navigateTo({
							url: "../prepare-request-lawyer/prepare-request-lawyer?modalData=" + encodeURIComponent(JSON.stringify(this.targetUser))
						})
						this.$emit('closeModal');
					} else {
						console.log(res.info);
					}
				})
			},
		}
	}
</script>

<style>
	.mask {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.mask.mask-show {
		background: rgba(0, 0, 0, 0.6);
	}

	.smaller-circle {
		margin: 32upx 32upx 0;
		border-radius: 80upx;
		width: 160upx;
		height: 160upx;
	}

	.callpair-button {
		padding: 16rpx 64rpx;
		margin: 36rpx;
		background-color: #A868FF !important;
		font-size: 24rpx;
		line-height: 1.8;
		border-radius: 48rpx;
	}
</style>
